<script lang="ts" setup>
import { ElCard } from 'element-plus'
import { ref } from 'vue'

import Home from './home.vue'
import Product from './product.vue'
import Vr from './vr.vue'

const tabsList = [
    {
        labal: '首页配置',
        name: 'home',
    },
    {
        labal: '产品首页配置',
        name: 'product',
    },
    {
        labal: 'VR设置',
        name: 'vr',
    },
]

const activeName = ref('home')

const componentEnum = {
    home: Home,
    product: Product,
    vr: Vr,
}

const componentDom = computed(() => componentEnum[activeName.value])
</script>

<template>
    <ElCard shodaw="never">
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in tabsList"
                         :key="item.name"
                         :label="item.labal"
                         :name="item.name"
            />
        </el-tabs>

        <component :is="componentDom" />
    </ElCard>
</template>

<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
